<template>
  <div class="hm-son">
    <div>{{ username }}</div>
    <button @click="changeUsername()">修该props中的属性</button>
    <div>{{ hobbies }}</div>
    <button @click="changeHobbies()">修改data中的数据</button>
  </div>
</template>

<script>
export default {
  name: 'HmSon',
  props: {
    username: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      hobbies: ['吃饭', '睡觉', '打豆豆']
    }
  },
  methods: {
    changeUsername() {
      // this.username = 'HmSon'
    },
    changeHobbies() {
      this.hobbies.push('看电影')
    }
  }
}
</script>

<style lang="less">
.hm-son {
  width: 400px;
  height: 400px;
  border: 10px solid #000;
}
</style>
